<template>
  <div class="content">
    <div class="top">
      <div class="warning">告警信息：<span class="action">设备调模锁定，请选择寸动模式</span></div>
      <button class="logo" @click="login">登录</button>
    </div>
    <div class="box">
      <div class="item">
        <div class="left">
          <span>巡检最高频次：</span>
          <el-input class="npt" v-model="highestFrequency"></el-input>
        </div>
        <div class="right">
          <span>巡检最低频次：</span>
          <el-input class="npt" v-model="lowestFrequency"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <span>当前巡检频次：</span>
          <el-input class="npt" v-model="currentFrequency"></el-input>
        </div>
        <div class="right">
          <span>已生产次数：</span>
          <el-input class="npt" v-model="producedTimes"></el-input>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <span class="radio-group">
            巡检结果：
            <el-radio-group>
              <el-radio label="qualified">合格</el-radio>
              <el-radio label="unqualified">不合格</el-radio>
            </el-radio-group>
          </span>
        </div>
        <div class="right">
          <el-button class="btn">巡检确认</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :before-close="handleClose"
    >
      <span slot="title" class="custom-dialog-title">
        调模异常授权
        <i
          class="custom-close-button el-icon-close"
          style="float: right; cursor: pointer"
          @click="handleClose"
        ></i>
      </span>
      <el-row type="flex" align="top" style="font-size: 20px; font-weight: 600">
        <el-col :span="18">
          &nbsp;&nbsp; 员工号：<el-input
            v-model="form.userCode"
            placeholder="员工号"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
          <br />
          <br />
          登录密码：<el-input
            type="password"
            v-model="form.password"
            placeholder="登录密码"
            style="width: 70%; font-size: 20px; font-weight: 600"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            class="button-login"
            @click="dialoglogin()"
            style="margin-top: 20px"
            >登录</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { qualityLogin } from '@/api';

export default {
  name: 'QualityInspect',
  data() {
    return {
      dialogVisible: false,
      form: {
        userCode: '',
        password: '',
      },
    };
  },
  methods: {
    login() {
      this.dialogVisible = true;
    },
    async dialoglogin() {
      const res = await qualityLogin(this.form);
      if (res.code == 200) {
        this.$message.success('登录成功');
        this.dialogVisible = false;
      }
      if (res.code == 400) {
        this.$message.error('员工号或密码错误');
      }
      console.log(res, '质量巡检登录');
    },
    // 关闭对话框回调
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #fff;
  margin: 0 6px 8px 6px;
  .top {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    .warning {
      font-size: 22px;
      padding-left: 30px;
      font-weight: 600;
      .action {
        font-size: 24px;
        color: red;
        font-weight: 600;
      }
    }
    .logo {
      flex-shrink: 0;
      font-size: 22px;
      border: none;
      height: 50px;
      width: 70px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      background-color: #409eff;
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .box {
    height: 580px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #fff;
    margin: 0 6px 8px 6px;
    padding: 0 20px;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px;
      font-weight: 600;
    }
    .item .left .radio-group {
      display: flex;
      align-items: center;
    }
    .item .left .radio-group input[type="radio"] {
      width: 20px;
      height: 20px;
      margin-left: 30px;
    }

    .item .npt {
      width: 200px;
      height: 60px;
      font-size: 30px;
      text-align: center;
    }
    .item .right .btn {
      width: 260px;
      height: 200px;
      color: #fff;
      font-size: 50px;
      text-align: center;
      background-color: #409eff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
// 添加自定义样式
::v-deep .el-radio__label {
  font-size: 30px !important;
  font-weight: 600 !important;
}
::v-deep .el-radio__inner {
  width: 22px !important;
  height: 22px !important;
}
.custom-dialog-title {
  font-size: 25px; /* 调整关闭按钮的字体大小 */
  cursor: pointer; /* 添加指针样式，以表明它是可点击的 */
}
.button-login {
  height: 100%;
  font-size: 30px;
  line-height: 40px;
}
</style>
